<template>
  <el-card class="box-card">
    <!-- 卡片头部的父元素可以用flex布局, 水平两端对齐, 垂直居中对其-->
    <div slot="header" style="display: flex; justify-content: space-between;align-items: center">
      <!-- 左边放标题 -->
      <span>销售员列表</span>
      <!-- 左边放按钮 -->
      <el-button type="primary">添加销售员</el-button>
    </div>
    <!-- 头部下面放卡片主体 -->
    <div>
      <!-- 搜索的表单 :inline="true"表示表单水平排列 -->
      <el-form :inline="true" :model="param" style="min-width: 1000px">
        <el-form-item>
          <el-input v-model="param.saleName" placeholder="输入销售员姓名"/>
        </el-form-item>
        <el-form-item>
          <el-select v-model="param.sex" placeholder="选择性别">
            <el-option value="男">男</el-option>
            <el-option value="女">女</el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="param.lowSal" placeholder="最低薪资"/>
        </el-form-item>
        <el-form-item>
          <el-input v-model="param.highSal" placeholder="最高薪资"/>
        </el-form-item>

        <!-- 搜索按钮也是调用getCarList方法 -->
        <el-button type="primary" @click="getSalesmanList">搜索</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form>
      <el-table :data="tableData" stripe border max-height="600" style="width: 100%">
        <el-table-column prop="id" label="销售员工号" min-width="150"></el-table-column>
        <el-table-column prop="saleName" label="销售员姓名" min-width="150"></el-table-column>
        <el-table-column prop="password" label="密码" min-width="150"></el-table-column>
        <el-table-column prop="sex" label="性别" min-width="150"></el-table-column>
        <el-table-column prop="contact" label="联系方式" min-width="150"></el-table-column>
        <el-table-column prop="sal" label="薪资" min-width="150"></el-table-column>
        <el-table-column label="操作" min-width="300px">
          <!-- 用template来自定义这一列的内容 v-slot="scope"可以用scope.row拿到这一行数据对象, scope.$index拿到这一行的索引 -->
          <template v-slot="scope">
            <el-button size="mini">编辑</el-button>
            <el-button type="danger" size="mini">删除</el-button>
            <el-button type="primary" v-if="scope.row.state==0" size="mini">在职</el-button>
            <el-button type="success" v-if="scope.row.state==1" size="mini">离职</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          style="margin-top: 20px"
          background
          layout="sizes,prev, pager, next, jumper, total"
          :page-size="param.size"
          :current-page="param.current"
          :page-sizes="sizes"
          :total="total"
          :page-count="pages"
          @current-change="currentChange"
          @size-change="sizeChange">
      </el-pagination>
    </div>
  </el-card>
</template>
<script>

export default {
  name: "SalesmanVue",
  data() {
    return {
      total: 0,
      pages: 0,
      sizes: [5, 10, 20, 50, 100],
      tableData: [],
      param: {
        saleName: null,
        lowSal: null,
        highSal: null,
        sex: null
      }
    }
  }, methods: {
    getSalesmanList() {
      this.$http.get('/salesman/query', {params: this.param}).then((data) => {
        this.tableData = data.records
      })
    }, resetForm() {
      this.param.carName = null
      this.param.brandId = null
      this.param.lowDailyRent = null
      this.param.highDailyRent = null
    }, currentChange(val) {
      this.param.current = val
      this.getSalesmanList()
    },
    // 当size改变时的回调行数
    sizeChange(val) {
      this.param.size = val
      this.getSalesmanList()
    }

  }, created() {
    this.getSalesmanList()
  }
}
</script>

<style scoped>

</style>